<template>
  <div class="navbar">

 <el-menu
      :router="false"
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#304156"
      
      text-color="#fff"
      active-text-color="#ffd04b">
          <div class="d1">
      <img class="logo" src="@/assets/logo.png" width="50px" />
      <span class="company">程序员的吉他库</span>
    </div>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-folder-opened"></i>
          <span>吉他谱</span>
        </template>
        <el-menu-item-group>
          <template slot="title">弹唱谱</template>
          <el-menu-item index="1-1"  @click="route(my,1,1)" >民谣</el-menu-item>
          <el-menu-item index="1-2" @click="route(lx,1,2)" >流行 </el-menu-item>
          <el-menu-item index="1-3" @click="route(yg,1,3)">摇滚</el-menu-item>
      </el-menu-item-group>
        </el-menu-item-group>
        <el-menu-item-group title="指弹谱">      
          <el-menu-item index="1-5" @click="route(rh,2,1)">日韩</el-menu-item>
          <el-menu-item index="1-4" @click="route(zgf,2,2)">中国风</el-menu-item>
          <el-menu-item index="1-6" @click="route(lx,2,3)">欧美</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  
  </div>
</template>
<script>
  export default {
    data() {
      return {
 //--------------------------------------------------路由路径       
        lx: "/lx/",
        my:"/my/",
        yg:"/yg/",

        rh:"/rh/",
        om:"/om/",
        zgf:"/zgf",
      };
    },
    methods: {
     route(xx,category,subcategory){
          this.$router.push({
          path: xx,
          query: {
            category:category,
            subcategory:subcategory
          }
        })
     }
    }
  }
</script>
<style scoped>
.logo {
  vertical-align: middle;
  /* 上 右 下 左 */
  padding: 0px 0px 0 20px;
}
.company {
  position: absolute;
  color: white;
  padding: 12px 10px 0 20px;
}
.d1 {
  background-color: black;
  height: 50px;
  border-radius: 8px;
}
</style>


